<template>
  <BasicModal title="扩展参数配置" @register="registerModal" keyboard :canFullscreen="false" cancelText="关闭" @ok="handleSubmit">
    <template #default>
      <a-spin :spinning="spinningLoading">
        <BasicForm @register="registerForm" />
      </a-spin>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, toRaw, toRefs } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';

  export default defineComponent({
    name: 'FieldExtendJsonModal',
    components: {
      BasicModal,
      BasicForm,
    },
    emits: ['success', 'register'],
    setup(_p, { emit }) {
      const spinningLoading = ref(false);
      function initExtendConfig() {
        extendConfig.uploadnum = 0;
        extendConfig.showLength = '';
        extendConfig.popupMulti = true;
        extendConfig.multiSelect = true;
        extendConfig.store = '';
        extendConfig.text = '';
        extendConfig.orderRule = '';
        extendConfig.validateError = '';
      }
      const extendConfig = reactive({
        uploadnum: 0,
        showLength: '',
        popupMulti: true,
        store: '',
        text: '',
        multiSelect: true,
        orderRule: '',
        validateError: '',
      });
      const fieldShowType = ref('');
      const rowKey = ref('');
      const sortFlag = ref('0');
      const formSchemas = [
        {
          label: 'rowKey',
          field: 'rowKey',
          component: 'Input',
          show: false,
        },
        {
          label: '文件上传数量',
          field: 'uploadnum',
          component: 'InputNumber',
          componentProps: {
            style: {
              width: '100%',
            },
          },
          ifShow: () => {
            return fieldShowType.value === 'file' || fieldShowType.value === 'image';
          },
        },
        {
          label: '是否多选',
          field: 'popupMulti',
          component: 'RadioGroup',
          defaultValue: true,
          componentProps: {
            options: [
              { label: '否', value: false },
              { label: '是', value: true },
            ],
          },
          ifShow: () => {
            return fieldShowType.value === 'popup';
          },
        },
        {
          label: '是否多选',
          field: 'multiSelect',
          component: 'RadioGroup',
          defaultValue: true,
          componentProps: {
            options: [
              { label: '否', value: false },
              { label: '是', value: true },
            ],
          },
          ifShow: () => {
            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
          },
        },
        {
          label: '存储字段',
          field: 'store',
          component: 'Input',
          ifShow: () => {
            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
          },
        },
        {
          label: '展示字段',
          field: 'text',
          component: 'Input',
          ifShow: () => {
            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
          },
        },
        {
          label: '默认排序',
          field: 'orderRule',
          component: 'RadioGroup',
          defaultValue: '',
          componentProps: {
            options: [
              { label: '降序', value: 'desc' },
              { label: '升序', value: 'asc' },
              { label: '不默认排序', value: '' },
            ],
          },
          ifShow: () => {
            return sortFlag.value === '1';
          },
        },
        {
          label: '校验提示',
          field: 'validateError',
          component: 'Input',
          componentProps: {
            placeholder: '请输入校验提示文本',
          },
        },
      ];
      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
        schemas: formSchemas,
        showActionButtonGroup: false,
        labelAlign: 'right',
        labelWidth: 100,
      });
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        console.log('extend json', data);
        initExtendConfig();
        if (data.jsonStr) {
          let json = JSON.parse(data.jsonStr);
          Object.keys(json).map((k) => {
            console.log('扩展参数:' + k + '=' + json[k]);
            extendConfig[k] = json[k];
          });
        }
        fieldShowType.value = data.fieldShowType;
        rowKey.value = data.id;
        sortFlag.value = data.sortFlag;
        let temp = toRaw(extendConfig);
        await resetFields();
        await setFieldsValue(
          Object.assign({}, temp, {
            rowKey: data.id,
          })
        );
      });
      async function handleSubmit() {
        let data = await validate();
        console.log('datga', data);
        let type = fieldShowType.value;
        let obj = {};
        if (type === 'file' || type === 'image') {
          if (data.uploadnum && data.uploadnum > 0) {
            obj.uploadnum = data.uploadnum;
          }
        } else if (type === 'textarea' || type === 'text') {
          if (data.showLength && data.showLength > 0) {
            obj.showLength = data.showLength;
          }
        } else if (type === 'sel_user' || type === 'sel_depart') {
          obj = pick(data, 'store', 'text', 'multiSelect');
        } else if (type === 'popup') {
          obj.popupMulti = data.popupMulti;
        }
        if (sortFlag.value === '1' && data.orderRule) {
          obj.orderRule = data.orderRule;
        }
        if (data.validateError) {
          obj.validateError = data.validateError;
        }
        console.log('obj....', obj);
        for (let key in obj) {
          if (obj[key] === '') {
            delete obj[key];
          }
        }
        console.log(obj);
        emit('success', obj, data.rowKey);
        closeModal();
      }
      return Object.assign(
        {
          spinningLoading,
          registerModal,
          registerForm,
          fieldShowType,
          rowKey,
          handleSubmit,
        },
        toRefs(extendConfig)
      );
    },
  });
</script>
<style scoped></style>
